<template>
	<view class="forgetPwd">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="20"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">修改支付密码</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>
		<template v-if="typeShow === 1">
			<view class="verification">
				<view class="title">账号验证</view>
				<!-- 				<view class="msg">已发送到手机号{{phone}}</view>
				<u-code change-text="重新发送 xs" ref="uCode" @change="codeChange"></u-code>
				<view class="sendBtn" @tap="getCode">{{tips}}</view> -->
				<view class="formInput">
					<view class="label">手机号</view>
					<view class="inputBox">
						<u--input class="inputStyle" v-model="phone" placeholder="请输入手机号" color="#333" type="number"
							border="none"></u--input>
					</view>
				</view>
				<view class="formInput imgCode">
					<view class="label">图形验证码</view>
					<view class="inputBox">
						<u--input class="inputStyle" cursor-spacing="10" border="none" type="number" maxlength="6"
							placeholder="请输入图形验证码" v-model="form.loginCode" />
						<view class="image-box">
							<image class="codeImg" @tap="getLoginCode" :src="loginCodeSrc" mode="heightFix"></image>
						</view>
					</view>

				</view>
				<view class="formInput send-con">
					<view class="label">验证码</view>
					<view class="inputBox">
						<u--input class="inputStyle" border="none" :clearable="false" type="number" placeholder="请输入验证码"
							v-model="captcha" maxlength="6" />
						<u-code change-text="x秒后" ref="uCode" @change="codeChange">
						</u-code>
						<text class="send" @tap="getCode">{{tips}}</text>
					</view>
				</view>
				<view class="nextBtn" v-if="captcha.length == 6" @tap="finish">下一步</view>
				<view v-else class="nextBtn default">下一步</view>
			</view>
		</template>
		<template v-else-if="typeShow === 2">
			<view class="payPwd">
				<view class="title">{{pwdType===0?'输入支付密码':'再次输入支付密码'}}</view>
				<view class="msg" :style="`color:${pwdError?'#EB1044':''}`">{{!pwdError?'请输入6位数操作密码':'*两次密码输入不一致，请重试'}}
				</view>
				<u-code-input :size="inputSize" v-if="pwdType===0" :class="`codeInput`" borderColor="rgba(0,0,0,0)"
					color="" v-model="password" mode="box" dot :focus="true">
				</u-code-input>
				<u-code-input :size="inputSize" v-if="pwdType===1" :class="`codeInput`"
					:borderColor="pwdError?'rgba(255,29,29,.5)':'rgba(0,0,0,0)'" color="" v-model="izPassword"
					mode="box" dot :focus="true">
				</u-code-input>
				<view v-if="(password.length === 6 && pwdType===0)||(izPassword.length === 6&&pwdType===1)"
					class="nextBtn" @tap="pwdEnd">下一步</view>
				<view v-else class="nextBtn default">下一步</view>
			</view>
		</template>
		<!-- 修改成功 -->
		<template v-else>
			<view class="bindingOk">
				<image class="successImg" src="../../static/detail/shopsuccess.png" mode="widthFix"></image>
				<view class="msg">您的支付密码修改成功</view>
				<!-- <view class="tip">您的支付密码设置成功</view> -->
				<view class="cancel_btn" @tap="back()">确定</view>
			</view>
		</template>

		<!-- 加载弹窗 -->
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		getUser,
		getSendPhoneCode,
		checkCode,
		updateAccountPassword,
	} from '../../api/user.js'
	import {
		throttle
	} from '@/common/util.js'
	import JSEncrypt from '@/common/jsencrypt.min.js'
	export default {
		data() {
			return {
				typeShow: 1, // 1,验证码;2,支付密码;3,修改成功
				inputSize: 35, // codeInput 框的大小

				// 验证码
				phone: '', // 脱敏手机号
				user: null,
				captcha: "", // 验证码
				tips: "", // 倒计时
				codeError: false, // 验证码是否输入错误

				// 输入支付密码
				pwdType: 0, // 第一次输入密码
				password: "", // 支付密码
				izPassword: "", // 验证支付密码
				pwdError: false, // 两次密码是否错误

				form: {
					bankName: "",
					settleAccount: "",
					loginCode: "",
					accountSign: "0", //	0卡号1账号
					checked: false
				},
				loginCodeSrc: '',
				loginCodeUid: '',
			}
		},
		async mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.inputSize = (res.windowWidth - 180) / 6
				}
			})

			this.$refs.min_loading.open()
			let res = await getUser()
			this.user = res.data.user
			// 脱敏手机号
			this.phone = this.user.mobile;
			this.getLoginCode()
			this.$refs.min_loading.close()
			// this.getCode()
		},
		methods: {
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
				 uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			// 验证码倒计时
			getCode() {
				if (this.form.loginCode) {
					console.log(this.phone, '0000')
					try {
						if (!this.phone) throw '请输入手机号'
						let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
						if (!reg.test(this.phone)) throw '手机号码格式不正确'
						// if (!this.form.loginCode) throw '请输入图形验证码'
					} catch (err) {
						this.$u.toast(err);
						return
					}
					this.getPhoneCode();
					// this.getLoginCode();
					// this.show = true;
					// this.isFocus = true
				} else {
					this.$u.toast('请输入图形验证码');
				}
			},
			getPhoneCode() {
				try {
					if (!this.form.loginCode) throw "请输入验证码";
				} catch (e) {
					this.$u.toast(e);
					return;
				}
				// uni.showLoading({
				// 	title: '正在发送短信验证码'
				// })
				this.$refs.min_loading.open('正在发送短信验证码');
				let obj = {
					mobile: this.phone,
					uid: this.loginCodeUid,
					viewCode: this.form.loginCode
				}
				getSendPhoneCode(obj).then(res => {
					if (res.data.success) {
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.show = false
					} else {
						this.$u.toast(res.data.msg);
						this.form.loginCode = "";
						this.getLoginCode()
						// this.$refs.uCode.reset();
					}
				}).finally(() => {
					// uni.hideLoading();
					this.$refs.min_loading.close();
				})
			},
			// // 发送验证码,开启倒计时
			// async getCode() {
			// 	let res = await getSendPhoneCode()
			// 	// this.codeError = false
			// 	this.$u.toast(res.data.msg)
			// 	this.$refs.uCode.start();
			// },
			// 获取验证码按钮倒计时
			codeChange(text) {
				this.tips = text;
			},
			// 验证码输入时触发
			onCodeChange(e) {
				if (e.length < 6) {
					this.codeError = false
				}
			},
			// 重新获取图片验证码
			getLoginCode() {
				this.loginCodeUid = new Date().getTime()
				this.loginCodeSrc = `${this.baseApi}/code/loginCode?uid=${this.loginCodeUid}`
			},
			// 验证码下一步触发
			async finish(e) {
				this.$refs.min_loading.open()
				let res = await checkCode({
					verifyCode: this.captcha
				})
				if (res.data.success) {
					this.password = ''
					this.izPassword = ''
					this.pwdError = false
					this.typeShow = 2
				} else {
					this.codeError = true
					this.$u.toast(res.data.msg)
				}
				this.$refs.min_loading.close()
			},
			// 支付密码完成时
			pwdEnd: throttle(async function() {
				this.$refs.min_loading.open()
				if (this.pwdType === 0) {
					this.pwdType = 1
					this.$refs.min_loading.close()
				} else if (this.pwdType === 1 && this.password === this.izPassword) {
					this.pwdError = false
					let res = await updateAccountPassword({
						accountPassword: this.hrymd5.md5(this.password),
						confirmAccountPassword: this.hrymd5.md5(this.izPassword),
					})
					if (res.data.success) {
						this.typeShow = 3
					} else {
						this.$u.toast(res.data.msg)
					}
					this.$refs.min_loading.close()
				} else {
					this.pwdError = true
					this.$refs.min_loading.close()
				}
			}, 1000),
		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #fff;
	}

	.forgetPwd {
		background-color: #fff;
		color: #000;
		/* #ifdef APP-PLUS */
		min-height: 100vh;
		padding: calc(100upx + var(--status-bar-height)) 32upx 40upx;
		/* #endif */
		/* #ifdef H5 */
		padding: 140upx 32upx 40upx;

		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}


		.backImg {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;

			image {
				width: 80upx;
				height: 80upx;
			}
		}

		/* #endif */

		.payPwd,
		.verification {

			.title {
				font-size: 45upx;
				text-align: center;
			}

			.msg {
				font-size: 33upx;
				text-align: center;
				margin: 28upx 0 40upx;
			}

			.codeInput {
				margin-top: 150upx;
				margin-bottom: 100upx;
				justify-content: center;

				/deep/ .u-code-input__item {
					background-color: #ccc;
					border-radius: 10upx;
					width: 59upx;
					height: 59upx;
				}

				/deep/ .u-code-input__item__dot {
					background-color: #000;
				}

			}

			.nextBtn {
				width: 90%;
				margin: 0 auto;
				height: 80upx;
				margin-top: 200upx;
				background: #CEA539;
				border-radius: 10upx;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		// 验证码
		.verification {
			.msg {
				opacity: .7;
			}

			.sendBtn {
				text-align: center;
				font-size: 28upx;
				font-weight: 600;
				margin-bottom: 84upx;
				color: #EB1044;
				opacity: .7;
			}

			.formInput {
				width: 100%;
				border-bottom: 1px solid rgba(200, 200, 201, .15);
				padding-bottom: 16upx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				color: #333;

				.label {
					font-size: 30upx;
					width: 100%;
					margin-bottom: 26upx;
				}

				.inputBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
				}

				input {
					flex: 1%;
					font-size: 26upx;
					padding-left: 30upx;
					color: #333;
				}
			}

			.send-con {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.send {
					font-size: 26upx;
					color: #C09B3A;
				}
			}

			.imgCode {
				width: 100%;
				position: relative;
				overflow: hidden;

				input {
					width: 60%;
				}

				.image-box {
					padding: 10upx 10upx 10upx 0;
					position: absolute !important;
					right: 0 !important;
					bottom: 0 !important;
					height: 80upx;

					.codeImg {
						height: 100%;
					}
				}

			}
		}

		.bindingOk {
			text-align: center;
			margin-top: 80upx;

			.successImg {
				width: 100upx;
				height: 100upx;
			}

			.msg {
				font-size: 18px;
				margin: 40upx 0 35upx;
				font-weight: 600;
			}

			.tip {
				color: rgba(255, 255, 255, .6);
				font-size: 13px;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
			}
		}


		// // 不可点击状态的按钮
		// .default {
		// 	background-image: url('../../static/login/login_btn.png') !important;
		// 	color: rgba(255, 255, 255, .3) !important;
		// }


		.cancel_btn {
			width: 90%;
			margin: 0 auto;
			height: 80upx;
			margin-top: 200upx;
			background: #CEA539;
			border-radius: 10upx;
			font-weight: 400;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}

	}
</style>
